<template>
	<view class="pingbilist">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="屏蔽设置" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="baibox">
		
			<view class="baili" v-for="(item,index) in list">
				<image v-if="item.pic" :src="item.pic | formatImgUrl" class="pic" style="width: 80rpx;height: 80rpx;margin-right: 10px;"  mode=""></image>
				<view class="txt">
					{{item.nickname}}
				</view>
				<view class="cenbox" @click="yichu(item)">
					<view class="centxt oneline">
						移除
					</view>
				</view>
				<!-- <image :src="'/images/rarr.png' | formatImgUrl" class="rarr" mode=""></image> -->
			</view>
			
			
			
		</view>
		
		<view class="empytView" v-if="list.length<=0">
						<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
						<!-- <view>- 空列表 -</view> -->
		</view>
		
		
	</view>
</template>
<script>
	export default { 
		data() {
			return {
				userInfo: this.$db.get('userInfo'),
				// 头像弹框
				show:false,
				page:1,
				// 标签
				erList:[],
				// 生日
				date: new Date().toLocaleDateString().replace(/\//g, "-"),
				array: ['请选择', '男', '女'],
				index: 0,
				list:[],
				type:2,
			}
		},
		onLoad(ops) {
			this.type = ops.type
			this.getList()
		},
		// 上拉加载
		onReachBottom() {
		
			
			this.getList();
			
		},
		methods: {
			yichu(item){
				this.$api.default.request('user/user_friend_yichu_back', {id:item.id}).then((res) => {
					if (res.code == 1) {
						this.page = 1;
						this.list = null;
						this.getList();
						this.$common.successToShow(res.msg)
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			getList() {
				this.$api.default.request('user/user_friend_f', {
					page: this.page,
					type:this.type
				}, 'POST', false).then((res) => {
					if (res.code) {
						// this.list = res.data
						if(res.data.data){
							if (this.list != null) {
								// this.articleList.concat(res.data.data);
								this.list = this.list.concat(res.data.data);
								// res.data.data.forEach((item) => {
								// 	this.logList.push(item)
								// })
							} else {
								this.list =	res.data.data;
							}
							this.page++; // 页数加一，加载下一页数据
						}
					}
				})
			},
			go_auth(){
				if(this.userInfo.is_auth==1){
					uni.navigateTo({
						url: '/pages/user/auth1'
					})
				}else{
					uni.navigateTo({
						url: '/pages/user/auth'
					})
				}
				
			},
			bindPickerChange: function(e) {
			            console.log('picker发送选择改变，携带值为', e.detail.value)
			            this.index = e.detail.value
						this.saveUser({
							'sex': this.index
						})
			},
			getUserInfo() {
				this.$api.default.request('user/userInfo').then((res) => {
					if (res.code) {
						this.userInfo = res.user
						this.index = res.user.sex?res.user.sex:0
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			onChooseAvatar(e) {
				this.$common.uploadImg(e.detail.avatarUrl, (data) => {
					if (data) {
						this.saveUser({
							'pic': data
						})
					}
				})
			},
			bindNick(e) {
				console.log(e)
				if (e.detail.value != this.userInfo.username) {
					this.userInfo.username = e.detail.value
					this.saveUser({
						'username': this.userInfo.username
					})
				}
			},
			saveUser(data) {
				this.$api.default.request('user/saveUser', data).then((res) => {
					if (res.code == 1) {
						this.userInfo = res.user
						this.$common.successToShow(res.msg)
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			// 头像弹框
			open() {
				
			},
			close() {
				this.show = false
			},
			// 生日
			 bindDateChange: function(e) {
				this.date = e.detail.value
				this.saveUser({
					'birthday': e.detail.value
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 245, 242, 1);
	}
	.pingbilist {
		.biaoqian{
			width: 80%;
			margin-left: 10%;
			text-align: center;
			.top{
				font-size: 22px;
				font-weight: 700;
			}
			.tab{
				font-size: 22px;
				font-weight: 700;
			}
			
		}
		
		padding-top: 20rpx;
		.baibox{
			background-color: #ffffff;
			padding: 0 68rpx;
			margin-bottom: 20rpx;
			.baili:last-child{
				border: none;
			}
			
			.baili{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 120rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				.pic{
					width: 50rpx;
					heigth:50rpx !important;
					border-radius:15em;
				}
				
				.txt{
					flex-grow: 1;
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
					flex-shrink: 0;
				}
				.cenbox{
					flex-grow: 1;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					padding: 0 16rpx;
					margin-right: 50px;
					.centxt{
						font-size: 28rpx;
						font-weight: normal;
						text-align: right;
						letter-spacing: 0em;
						color: #F27250;
						width:60rpx;
					}
					
				}
				.rarr{
					width: 40rpx;
					height: 40rpx;
					flex-shrink: 0;
				}
			}
		}
		
	}
</style>